<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				border: 4px solid red;
				border-radius: 15px;
			}
		</style>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script>
			$(function(){
				$("#f").on("mouseover","li",function(){
					$(this).css("font-size","60px");
				});
				$("#f").on("mouseout","li",function(){
					$(this).css("font-size","16px");
				});
				$("#b1").click(function(){
					var nf=window.prompt("新水果:");
					if(!nf)
						return ;
					 $("#f").append("<li>"+nf+"</li>");
					//var l=$("<li></li>").append(nf);
					//$("#f").append(l);
				});	  	
				$("#b2").click(function(){
					var d=$("<div></div>");
					$("#f").appendTo(d);
					$("body").prepend(d);
				});
		    }); 
		</script>
	</head>
	<body>
		<h3 align="center">水果</h3>
		<!-- <div></div> -->
		<ul id="f">
			<li>桃子</li>
			<li>香蕉</li>
			<li>梨子</li>
			<li>菠萝</li>
			<li>萝卜</li>
		</ul>
		<input type="button" name="" id="b1" value="添加一个水果" />
		<input type="button" name="" id="b2" value="把水果加到div中去" />
	</body>
</html>
